<template>
    <div>
        <el-text class="text2">{{ chlidsIndex }}</el-text>
        <el-popover v-model:visible="popoverVisible_1" placement="right" trigger="click" :width="400">
            <!-- 多选框内容 -->
            <el-scrollbar height="90px">
                <el-checkbox-group v-model="checkedItems_1">
                    <el-checkbox v-for="item in options_1" :key="item.name" :label="item.name" :value="item">
                        {{ item.name }}
                    </el-checkbox>
                </el-checkbox-group>
            </el-scrollbar>

            <!-- 底部操作按钮（可选） -->
            <div style="margin-top: 10px; text-align: right;">
                <el-button size="small" @click="popoverVisible_1 = false">取消</el-button>
                <el-button size="small" type="primary" @click="confirmSelection_1">确认</el-button>
            </div>

            <!-- 触发按钮的插槽 -->
            <template #reference>
                <el-button type="primary" class="el-bt1" plain>选择参数</el-button>
            </template>
        </el-popover>
        <el-divider />
        <!-- 显示已选结果 -->
        <div v-for="itemChecked in checkedItems_1" style="margin-top: 10px;">
            <el-text class="text3" size="small">{{ itemChecked.name }}</el-text>
            <el-select v-if="itemChecked.editor.type === 'combox'" v-model="itemChecked.default" size="small"
                class="select2">
                <el-option v-for="opt in itemChecked.editor.options" :key="opt.value"
                    :label="opt.value + ':' + opt.label" :value="opt.value" />
            </el-select>
            <el-input v-if="itemChecked.editor.type === 'textbox'" v-model="itemChecked.default" size="small"
                style="width: 150px;margin-left: 10px;" placeholder="Please input" @input="handleInputChange_1" />
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, computed, watch } from 'vue'
import { useVarChooseStore } from '@/store/varChoose'
import { storeToRefs } from "pinia";


const props = defineProps(['childs', 'chlidsIndex'])
const varChooseStore = useVarChooseStore()
const { jsonMsg } = storeToRefs(varChooseStore)
const checkedItems_1 = ref<any>([]);    //多选框-1
const popoverVisible_1 = ref(false);      // 控制 Popover 显示/隐藏 ---多选框
const index = props.chlidsIndex;
const chlid = props.childs
const filteredItems = chlid.filter((item: any) => item.match && item.match.includes(index))
    .flatMap((item: any) => item.items);

console.log("1122222", filteredItems);
const options_1 = filteredItems;      // 多选框-1的选项

// console.log("props:", props.childs)

// 确认选择
const confirmSelection_1 = () => {
    // console.log('选中的值：', checkedItems_1.value);
    popoverVisible_1.value = false;
};

//输入框
const handleInputChange_1 = (value: any) => {
    // console.log('当前输入值:', value);
};

</script>

<style scoped>
.el-text {
    color: rgb(28, 27, 27);
    font-size: 15px;
    font-weight: bold;
}

.divCss1 {
    margin-bottom: 15px;
}

.el-button.el-bt1 {
    margin-left: 10px;
}

.el-text.text1 {
    margin-left: 20px
}

.el-text.text2 {
    margin-bottom: 0px;
    margin-left: 20px
}

.el-text.text3 {
    margin-bottom: 0px;
    margin-left: 20px;
    font-size: 12px;
}

.el-select.select1 {
    margin-left: 20px;
    width: 140px;
    size: 50px;
}

.el-select.select2 {
    margin-left: 20px;
    width: 150px;
}

.scrollbar-demo-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    margin: 10px;
    text-align: center;
    border-radius: 4px;
    background: var(--el-color-primary-light-9);
    color: var(--el-color-primary);
}

.el-button.el-bt2 {
    margin-left: 15px;
}
</style>
